<template>
  <div class="login">
    <el-card class="login_card">
      <template #header>
        <div class="login_card_header">
          <span class="login_card_header_title">{{ cardName }}</span>
          <el-button class="login_card_header_button" @click="onForgotPass">{{
            forgotPassword
          }}</el-button>
        </div>
      </template>
      <div class="login_content">
        <el-form
          :model="formData"
          label-width="60px"
          :rules="rules"
          size="default"
          status-icon
          ref="ruleFormRef"
        >
          <el-form-item :label="t('userName.value')" prop="userName">
            <el-input
              v-model="formData.userName"
              type="text"
              :placeholder="t('userName.inputPlaceHolder')"
            ></el-input>
          </el-form-item>
          <el-form-item :label="t('password.value')" prop="password">
            <el-input
              v-model="formData.password"
              type="password"
              :placeholder="t('password.inputPlaceHolder')"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit(ruleFormRef)">{{
              EnterText
            }}</el-button>
            <el-button @click="onReForm(ruleFormRef)">{{
              CancelText
            }}</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script lang="ts">
import { defineComponent, toRefs, reactive, ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import {
  ElCard,
  ElButton,
  ElForm,
  ElFormItem,
  ElInput,
  FormRules,
  FormInstance,
  ElMessage,
} from "element-plus";
import { useI18n } from "vue-i18n";
import { useActions } from "@/store/useActions";
export default defineComponent({
  setup() {
    const { locale, t } = useI18n();
    const state = reactive({
      cardName: t("login.title"),
      forgotPassword: t("forgotPassword.value"),
      EnterText: t("login.button"),
      CancelText: t("resetForm"),
      formData: {
        userName: "",
        password: "",
      },
    });
    const route = useRoute();
    const router = useRouter();
    const storeActions = useActions("", ["submitLoginForm"]);
    const ruleFormRef = ref<FormInstance>();
    const rules = reactive<FormRules>({
      userName: [
        { required: true, message: t("userName.errMsgNull"), trigger: "blur" },
        {
          validator(rule: any, value: any, callback: any) {
            var reg = /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
            if (reg.test(value)) {
              callback();
            } else {
              callback(new Error(t("userName.errMsgFormat")));
            }
          },
          trigger: "blur",
        },
      ],
      password: [
        { required: true, message: t("password.errMsgNull"), trigger: "blur" },
        {
          min: 8,
          max: 8,
          message: t("password.errMsgFormat"),
          trigger: "blur",
        },
      ],
    });
    const onSubmit = (formEl: FormInstance | undefined) => {
      if (!formEl) return;
      formEl.validate((valid) => {
        if (valid) {
          storeActions.submitLoginForm(state.formData).then(() => {
            route.query.source
              ? (location.href = decodeURIComponent(route.query.source + ""))
              : router.push({ name: "Home" });
          });
        } else {
          console.error(valid, "error.");
          return false;
        }
      });
    };
    const onReForm = (formEl: FormInstance | undefined) => {
      if (!formEl) return;
      formEl.resetFields();
      state.formData.userName = "";
      state.formData.password = "";
    };
    const onForgotPass = () => {
      ElMessage(t("forgotPassword.tips"));
    };
    onMounted(() => {
      const token = window.localStorage.getItem("Token");
      if (token) {
        location.href = decodeURIComponent(route.query.source + "");
        return;
      }
    });
    return {
      ...toRefs(state),
      onSubmit,
      onReForm,
      onForgotPass,
      rules,
      ruleFormRef,
      t,
    };
  },
  components: {
    ElCard,
    ElButton,
    ElForm,
    ElFormItem,
    ElInput,
  },
});
</script>

<style lang="scss" scoped>
.login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background-color: var(--bg-color);
  .login_card {
    width: 400px;
    .login_card_header {
      display: flex;
      align-items: center;
      .login_card_header_title {
        width: 99%;
      }
      .login_card_header_button {
      }
    }
    .login_content {
      padding: 20px;
    }
  }
}
</style>
